<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>

        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            /*
            说明:
                1. padding和font-size这两个属性相当于是动态的确定了按钮的长度和宽度.
                    - 这样做的好处是可以通过font-size属性来控制按钮的大小.
            */
            padding: 10px 15px;
            font-size: 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius: 5px;
            /*
            功能:
                控制鼠标移入使鼠标变为手型.
            */
            cursor: pointer;
        }
        /*
        功能:
            给类添加事件.
        说明:
            1. :link表示绑定默认显示的样子;
            2. :visited表示为点击之后默认的样子.
            3. :hover表示鼠标悬浮时显示的样子;
            4. :active表示鼠标点击时的样子.
        */
        .button:link    {color:blue;}
        .button:visited {color:black;}
        .button:hover   {color:red;}
        .button:active  {color:yellow;}

    </style>
</head>
<body>
<button class="button">给按钮绑定事件</button>
</body>
</html>